﻿
@{
    ViewBag.Title = "小杨工具库";
}
@section css{
    <link href="~/Content/index/vue/vxe-table/style.css" rel="stylesheet" />
}
@section style{
    <style type="text/css">
        .backImg {
            background: url("https://img-blog.csdnimg.cn/2ebd84257f154cb8848aab94dd663bb4.png");
            background: aliceblue;
            background-size: 100% 100%;
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }

        .login {
            border-radius: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translatex(-50%) translateY(-50%);
            transform: translatex(-50%) translateY(-50%);
            width: 520px;
            max-width: 100%;
            padding: 50px 50px;
            margin: 0 auto;
            overflow: hidden;
            background-color: #fff;
        }

            .login .title {
                text-align: center;
            }

                .login .title span {
                    font-size: 25px;
                    color: #000;
                }

            .login .list {
                display: flex;
                align-items: center;
                padding: 8px 0;
            }


        .getCode span {
            font-size: 20px;
            background: #f5f7fa;
            color: #777;
            border-radius: 4px;
            line-height: 38px;
            border: 1px solid #ccc;
            display: inline-block;
            margin-left: 10px;
            width: 80px;
            text-align: center;
            user-select: none;
            cursor: pointer;
        }

        .btn {
            display: flex;
            justify-content: flex-end;
            padding-top: 5px;
            padding-bottom: 30px;
        }

            .btn button {
                font-size: 13px;
                color: #fff;
                background: #46b5ff;
                outline: none;
                border: none;
                line-height: 35px;
                padding: 0 20px;
                display: inline-block;
                flex: 1;
                cursor: pointer;
            }
    </style>
}
<div id="app" v-cloak class="h100 hidden flex-column bg-greyLight">
    <div class="main">
        <div class="backImg"></div>
        <div class="login">
            <el-form status-icon :model="form" ref="ruleForm" label-width="0px"
                     class="demo-ruleForm">
                <el-form-item>
                    <div class="title">
                        <span>小杨工具库</span>
                        <el-popover placement="right"
                                    title="小程序码"
                                    width="200"
                                    trigger="hover">
                            <el-image src="https://ynz1901.oss-cn-shanghai.aliyuncs.com/main/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%A0%81/gh_6fec44bfa1f8_1280.jpg" fit="cover"></el-image>
                            <span slot="reference" class="el-icon-info color-blue"></span>
                        </el-popover>
                    </div>
                </el-form-item>
                <el-form-item prop="account">
                    <el-input prefix-icon="el-icon-user" ref="account" placeholder="请输入账号" v-model="form.account" clearable></el-input>
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input prefix-icon="el-icon-unlock" ref="pwd" placeholder="请输入密码" show-password v-model="form.pwd" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <div class="flex-row">
                        <el-input prefix-icon="el-icon-document-checked" ref="code" placeholder="请输入验证码" v-model="form.code" clearable>
                        </el-input>
                        <div class="getCode">
                            <span v-on:click="loadCode">{{ code }}</span>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item style="margin-bottom: 0px;">
                    <el-button style="width: 100%;" type="primary" v-on:click="onlog" v-on:keyup.enter="onlog">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

</div>
@section body{
    @System.Web.Optimization.Scripts.Render("~/Content/pc/Login?rd=" + DateTime.Now.ToString())
    <script type="text/javascript">
        window.$jscript.fn.Login.ready({ link: '@(Url.Content("~/"))',key:'@(Guid.NewGuid().ToString("n"))' });
    </script>
}
